<script setup>
import { ref, reactive,defineEmits } from 'vue'

// 参数
const props = defineProps({
    title:{type:String,default:''},
    num:{type:Number}, 
    fontSize:{type:String || Number}, 
    bgColor:{type:String,default:'green'},
    flag:{type:Boolean,default:false},
})
const flag =  ref(props.flag) 
// watch(props.flag,(n,o)=>{

// })
const emit = defineEmits(['isFlag'])

function accordionClick() {
    flag.value = !flag.value
    emit('isFlag',flag.value) 
}

// function accordionClick() {
//     props.flag = !props.flag
// }


</script>
<template>

    <div class="accordion">
        <div class="accordion-item">
            <div class="accordion-item-header" :style="{backgroundColor:bgColor} " @click="accordionClick">
                <span style="display: flex;align-items: center;">
                    <el-icon :size="fontSize" v-show="!flag">
                        <ArrowRight />
                    </el-icon>
                    <el-icon :size="fontSize" v-show="flag">
                        <ArrowDown />
                    </el-icon>
                    <span :style="{fontSize:fontSize+'px'} ">{{title}}</span>
                </span>
                <span style="font-size: 13px;">{{num}}</span>
            </div>
            <div class="accordion-item-content" v-show="flag">
                <slot></slot>
            </div>
        </div>
    </div>
</template>
<style src="./index.scss" scoped></style>